<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" ></script>

	 <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCVcuVK2AXYU4FkMzMZkccENM0Uz79VEFI&sensor=false">
    </script>
	
	 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 50% }
    </style>

	<script type="text/javascript">
	var map;
	var geocoder;
	var oldwindow = new google.maps.InfoWindow();
	function initialize() {
    	geocoder = new google.maps.Geocoder();
		var myLatlng = new google.maps.LatLng(30.2669, -98.7428);
		var myOptions = {
  		zoom: 4,
  		center: myLatlng,
  		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		var latlng = null;
		var location = null;
		<c:forEach items="${projects}" var="project">
		var resources = '';
		<c:forEach items="${project.humanResources}" var="resource">
			resources += '<li><c:out value="${resource.firstName}"/></li>';
		</c:forEach>

		codeAddress(new google.maps.LatLng(<c:out value="${project.latitude}"/>, <c:out value="${project.longitude}"/>),'<c:out value="${project.location}"/>', '<c:out value="${project.projectName}"/>', resources, '<c:out value="${project.company.name}"/>');
			
		</c:forEach>
		
		
		
		}
	
	function codeAddress(geolocation, location, name, resources, company) {
	    	  	var marker = new google.maps.Marker({
					position: geolocation,
					map: map,
					title:name
				});
	    	  	var contentString = '<div id="content">'+
			    '<div id="siteNotice">'+
			    '</div>'+
			    '<h2 id="firstHeading" class="firstHeading">'+name+'</h2>'+
			    '<div id="bodyContent">'+
			    '<p id="companyContent"><span class="label">Company</span>: '+company+'</p>'+
			    '<p id="locationContent"><span class="label">Location</span>: '+location+'</p>'+
			    '<div id="resourcesContent"><span class="label">Resources</span>: ' +
			    '<ul>'+resources+'</ul></div>' +
			    '</div>'+
			    '</div>';
			var infowindow = new google.maps.InfoWindow({
	    		content: contentString
			});
			
			google.maps.event.addListener(marker, 'click', function() {
				oldwindow.close();
	  			infowindow.open(map,marker);
	  			oldwindow = infowindow;
	  			
			}); 
	  }

    </script>
<link rel="stylesheet" type="text/css" href="CSS/main.css" />
</head>
<body onload="initialize()">
    
    <div id="banner"><h1 id="logo"><a href="Home" style="text-decoration: none; color:#ffffff;"> Project Locator</a> </h1> <a href="Create" class="navLink"> > Dashboard</a></div>
	<div id = "mainContent">
	<div id="map_canvas"/>
	</div>

</body>
</html>